<template>
  <div>
    <div class="header">
      <i class="iconfont icon-qianjin-copy" @click="iconClick"></i>
      我的卡包
      <div class="right" @click="addCard" v-if="active==1">添加{{cardName}}</div>
    </div>
    <div class="main">
      <div class="infor">请选择要提现的{{cardName}}</div>
      <div class="bankList" v-for="(item,index) in methodList" @click="setDefaultCard(item.dataId)">
          <img :src="item.bankThumbnail" alt="">
          <div class="bank">
              <div class="bankName">{{item.bankName}}</div>
              <div class="bankNO">**** **** **** {{item.cardCodeSub}}</div>
          </div>
          <div class="moren" v-show="index==0">默认</div>
      </div>
      
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { cookie } from 'vux'
import Top from '@/components/Header';
import { MessageBox } from 'mint-ui';
export default {
  name: 'method',
  components: { Top },
  data() {
    return {
      methodList: [],
      cardName:'',
      active:''
    }
  },
  mounted() {
    this.active=this.$route.query.active;
    Vue.http.headers.common['token'] = cookie.get('token'); //设置请求头(页面手动刷新，main.js不执行，所以需要拿到这里来设置)
    if(this.$route.query.active==2){
      this.cardName='储蓄卡';
      // 获取用户储蓄卡列表
      this.$http.get('/loansupermarket-pay/card/bind/loadBindCardList.do?status=1&cardType=1').then(function(response) {
        var resBody = response.body;
        if (resBody.code == '000') {
        this.methodList=resBody.data;
        }else if(resBody.code == '444'){
            this.$router.push({path:'/login',query:{history:1}});
        }else {
          if(resBody.mesg){
            MessageBox.alert(resBody.mesg, '提示');
          }
        }
      })
    }else if(this.$route.query.active==1){
      this.cardName='信用卡';
      // 获取用户信用卡列表
      this.$http.get('/loansupermarket-pay/card/bind/loadBindCardList.do?cardType=2').then(function(response) {
        var resBody = response.body;
        if (resBody.code == '000') {
        this.methodList=resBody.data;
        }else if(resBody.code == '444'){
            this.$router.push({path:'/login',query:{history:1}});
        }else {
         if(resBody.mesg){
            MessageBox.alert(resBody.mesg, '提示');
          }
        }
      });
    }
    
    
    
  },
  methods: {
    //返回箭头
    iconClick(){
      this.$router.go(-1);
    },
    //添加卡
    addCard(){
      if(this.$route.query.active==1 && !window.sessionStorage.getItem('idcardCode')){
        MessageBox.alert('请先绑定储蓄卡', '提示');
        return;
      }
      this.$router.push({ path: '/main/mine/myCard/addcard', query: { active: this.$route.query.active } });
    },
    //设置默认卡
    setDefaultCard(cardId){
      if(this.methodList.length==1){
        return;
      }
      MessageBox.confirm('确定要设置该卡为默认卡吗?').then(action => {
        this.$http.post('/loansupermarket-pay/card/bind/setDefaultCard',{dataId:cardId}).then(function(response) {
          var resBody = response.body;
          if (resBody.code == '000') {
            this.$router.go(-1);
          }else if(resBody.code == '444'){
              this.$router.push({path:'/login',query:{history:1}});
          }else{
            MessageBox.alert(resBody.mesg, '提示');
          }
        })
      }).catch(
        ()=>{}
      );
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
    background: -webkit-linear-gradient(bottom, #2ce9e8, #7dd7ff);
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 1.2rem;
    // background: $primaryColor;
    color: #fff;
    text-align: center;
    font-size: 0.42rem;
    line-height: 1.2rem;
    .icon-qianjin-copy {
        position: absolute;
        left: 0.4rem;
        color: #fff;
    }
    .right{
      position: absolute;
      right: 0.4rem;
      top:0;
      font-size: 0.4rem;
    }
    
}
.main{
    margin-top: 1.2rem;
    .infor{
        height: 1.33rem;
        line-height: 1.33rem;
        text-align: left;
        margin-left: 0.53rem;
        font-size:0.42rem;
        color:#666;
    }
    .bankList{
        width: 9.2rem;
        height: 2.46rem;
        margin:0 auto;
        margin-bottom:0.26rem;
        background: #fff;
        border-radius: 0.15rem;
        img{
          width: 1.17rem;
          float: left;
          margin-top: 0.64rem;
          margin-left: 0.54rem;
          margin-right: 0.4rem;
        }
        .bank{
            float: left;
            margin-top: 0.66rem;
            text-align: left;
          .bankName{
              font-size: 0.45rem;
              color:#333;
          }
          .bankNO{
              font-size: 0.37rem;
              color:#959595;
              margin-top:0.26rem;
          }
        }
        .moren{
            float: right;
            margin-right: 0.4rem;
            margin-top: 0.4rem;
            font-size: 0.37rem;
            color:#959595;
        }
    }
}
</style>

